<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html>
<head>
<title>register注册页面</title>
<meta charset="UTF-8">
</head>
<body>
	<table border="1px" cellpadding="5" cellspacing="0">
		<tr>
			<td width="30%">用户名:</td>
			<td><input type="text" id="userName" name="userName"></input><span
				id="userNameMsg"></span></td>
		</tr>
		<tr>
			<td width="30%">密&nbsp;&nbsp;&nbsp;码:</td>
			<td><input type="password" id="passWord" name="passWord"></input><span
				id="passWordMsg"></span></td>
		</tr>
		<tr>
			<td colspan="3"><button id="sub">注册</button></td>
		</tr>
	</table>

</body>

<script type="text/javascript">

	window.onload = function() {

		var xmlHttpRequest = null;
		var validateUserflag = false;
		create(); // 创建Ajax对象
		document.getElementById("userName").addEventListener("blur", function(e) {
			if (validateEmpty("userName")) {
				validateUserName("userName");
			}
		}, false);

		document.getElementById("passWord").addEventListener("blur", function(e) {
			validateEmpty("passWord");
		}, false);

		document.getElementById("sub").addEventListener("click", function(e) {
			// 注意这里要判断Ajax的提交正确性有个坑，要用标志位不能直接用方法的返回结果判断
			var valiUserEmpty = validateEmpty("userName");
			var valPasswordEmpty = validateEmpty("passWord");
			// 如果两边为空，都不用往下走了
			if(!valiUserEmpty || !valPasswordEmpty){
				alert("请填写完整后提交");
			}else{
				validateUserName("userName");
				if(validateUserflag){
						var userNameVal = document.getElementById("userName").value;
						var passWordVal = document.getElementById("passWord").value;
						xmlHttpRequest.open("post", "MemberServlet/add?userName=" + userNameVal + "&passWord=" + passWordVal);
						xmlHttpRequest.send(null);
				}else{
					var elemsg = document.getElementById("userName" + "Msg");
					elemsg.innerHTML = "<font color='red'>该用户已经有人注册了!</font>";
				}
			}
			


		}, false);

		// 创建Ajax对象
		function create() {
			if (window.XMLHttpRequest) {
				// 说明是非IE浏览器
				xmlHttpRequest = new XMLHttpRequest();
			} else {
				xmlHttpRequest = new ActiveXObject("Microsoft.XMLHttp");
			}
		}

		// 验证非空
		function validateEmpty(eleName) {
			var val = document.getElementById(eleName).value;
			var elemsg = document.getElementById(eleName + "Msg");

			if (val == "" || val == null) {
				elemsg.innerHTML = "<font color='red'>内容不允许为空！</font>";
				return false;
			} else {
				elemsg.innerHTML = "<font color='green'>内容输入正确！</font>";
				return true;
			}
		}

		// 验证用户名是否已经占用
		function validateUserName(eleName) {
			var userNameVal = document.getElementById(eleName).value;
			var elemsg = document.getElementById(eleName + "Msg");
			xmlHttpRequest.open("post", "MemberServlet/check?userName=" + userNameVal);
			xmlHttpRequest.send(null);
			// 异步请求验证
			xmlHttpRequest.onreadystatechange = function() {

				// 判断是否正确接收
				if (xmlHttpRequest.readyState == 4 && xmlHttpRequest.status == 200) {
					// 正确接收，那么现实在Div中
					var msg = xmlHttpRequest.responseText.trim(); //记得后端println()传来的带空格，所以trim()掉
					if (msg == "true") { // 说明已经有人注册了
						elemsg.innerHTML = "<font color='red'>该用户已经有人注册了!</font>";
						validateUserflag = false;
					} else {
						elemsg.innerHTML = "<font color='green'>内容输入正确！</font>";
						validateUserflag = true;
					}
				}
			}
		}


	}
</script>



</html>
